<!-- 资产模板首页 -->
<template>
  <div class="assetHome">
    <c-title :hide="false" :text="diy_name"></c-title>
    <div class="background_box"></div>
    <div class="main" style="margin: -8rem 0.75rem 0;">
      <div class="block" v-if="info.assetblock && info.assetblock.length && info.assetblock.length == 1">
        <div class="base-box" v-for="(item, index) in info.assetblock" :key="index">
          <div class="asset_block-item flex-column" @click="tourl(item.url, item.params, item.query)">
            <div class="f-12">{{ item.title }}</div>
            <div class="f-bold f-24 flex-a-c flex-j-c">
              <div class="f-12" v-if="item.symbol">￥</div>
              {{ item.num }}
            </div>
            <div class="margin-top-10 flex-j-sb">
              <van-button @click.stop="tourl(btn.url, btn.params, btn.query)" v-for="(btn, i) in item.btn" plain :key="i" type="primary" color="var(--themeBaseColor)" style="height: 38px;padding: 0 24px;">
                {{ btn.title }}
              </van-button>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-2" v-if="info.assetblock && info.assetblock.length && info.assetblock.length > 1">
        <div class="base-box" v-for="(item, index) in info.assetblock" :key="index">
          <div class="asset_block-item flex-column t-l" @click="tourl(item.url, item.params, item.query)">
            <div class="f-12">{{ item.title }}</div>
            <div class="f-bold f-24 flex-a-c">
              <div class="f-12" v-if="item.symbol">￥</div>
              {{ item.num }}
            </div>
            <div>
              <van-button @click.stop="tourl(btn.url, btn.params, btn.query)" v-for="(btn, i) in item.btn" :key="i" type="primary" size="mini" color="var(--themeBaseColor)" style="padding: 0 8px">
                {{ btn.title }}
              </van-button>
            </div>
          </div>
        </div>
      </div>

      <div class="base-box margin-top-10" v-if="info.log">
        <div class="flex-a-c flex-j-sb" >
          <div class="f-16 f-bold">{{ info.log.NavBar.title }}</div>
          <div class="themeColor f-12" @click="tourl(info.log.NavBar.url, info.log.NavBar.params, info.log.NavBar.query)">查看全部</div>
        </div>

        <div class="navList">
          <div class="lis" v-for="(item, index) in info.log.data" :key="index">
            <div class="rwo" v-for="col in info.log.nodeKey" :key="col.key" @click.stop="clickCol(item, 1)">
              <div
                class="col"
                :class="[ci % 2 === 0 ? 't-l' : 't-r', node.class, node.avatarImage || node.avatarImageBig ? 'flex' : '']"
                v-for="(node, ci) in col.node"
                :key="node.key"
                :style="{
                  color: (node.type && (node.type == 'changeVal' && fun.getDeepJsonValue(item, node.key) > 0 ? '#f15353' : '#259b24')) || node.color || '#818181',
                  fontSize: node.size || '12px'
                }"
              >
                <template v-if="node.avatarImageBig">
                  <img class="big-img" :src="fun.getDeepJsonValue(item, node.avatarImageBig)" alt="" />
                </template>
                <template v-if="node.leftText">{{ node.leftText }}</template>
                <template v-if="node.avatarImage">
                  <img class="min-img" :src="fun.getDeepJsonValue(item, node.avatarImage)" alt="" />
                </template>
                <template v-if="node.diyIcon">
                  <i class="iconfont" @click.stop="delHandle(item)" :class="[fun.getDeepJsonValue(item, node.diyIcon) ? fun.getDeepJsonValue(item, node.diyIcon) : 'icon-fontclass-shanchu']"></i>
                </template>
                <template v-if="node.isPrice">￥</template>{{ fun.getDeepJsonValue(item, node.key) }}
                <template v-if="node.rightText">{{ node.rightText }}</template>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="height: 80px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      diy_name: "--",
      info: {}
    };
  },

  created() {
    this.init();
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    init() {
      if (!this.$route.query.api) {
        return this.$toast("缺少必要参数");
      }
      this.info = {};
      this.getData();
    },
    async getData() {
      let _parame = this.$route.query.extparams ? JSON.parse(this.$route.query.extparams) : {};
      let { msg, result, data } = await $http.get(this.$route.query.api, _parame, ".");
      if (result == 0) {
        return this.$toast(msg);
      }

      // ================
      // data = {
      //   page_title: "资产中心-自定义",
      //   assetblock: [
      //     {
      //       title: "可用资产",
      //       num: "100",
      //       symbol: 1,//是否显示 ￥符号
      //       btn: [
      //         {
      //           title: "转让",
      //           url: "baseTransferTemplate",
      //           query: {
      //             plu: 'digitalID_available'
      //           }
      //         }
      //       ]
      //     },
      //     {
      //       title: "不可用资产",
      //       num: "99.5",
      //       symbol: 1,
      //       btn: [
      //         {
      //           title: "转让",
      //           url: "baseTransferTemplate",
      //           query: {
      //             plu: 'digitalID_unavailable'
      //           }
      //         }
      //       ]
      //     }
      //   ],
      //   log: {
      //     NavBar: {
      //       title: "资产明细",
      //       url: "baseBillingTemplate",
      //       query: {
      //         api: '明细页面接口'
      //       }
      //     },
      //     nodeKey: [
      //       {
      //         node: [
      //           //这里和通用模板的一样配置
      //           {
      //             key: "name",
      //             class: "bold",
      //             color: "#333"
      //           },
      //           {
      //             key: "pool_amount"
      //           },
      //           {
      //             key: "amount"
      //           },
      //           {
      //             key: "dividend_date",
      //           },
      //           {
      //             leftText: "备注："
      //           }
      //         ]
      //       }
      //     ],
      //     data: [
      //       //这里是几条明细的数据，几条而已
      //     ]
      //   }
      // };

      // 模板数据
      let { page_title, ...other } = data;

      this.info = other || {};
      this.diy_name = page_title;
      this.fun.setWXTitle(this.diy_name);
    },
    tourl(name,params={},query={}){
      if(!name) return;
      this.$router.push(this.fun.getUrl(name,params,query));
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.themeColor {
  color: var(--themeBaseColor);
}
.margin-top-6 {
  margin-top: 0.375rem;
}
.margin-top-8 {
  margin-top: 0.5rem;
}
.margin-top-10 {
  margin-top: 0.625rem;
}
.background_box {
  color: #382c0a;
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--themeBaseColor)), to(#f5f5f5));
  background-image: -webkit-linear-gradient(var(--themeBaseColor), #f5f5f5);
  background-image: linear-gradient(var(--themeBaseColor), #f5f5f5);
  min-height: 12.125rem;
  padding: 1.5938rem 1.0938rem 0 1.0938rem;
}
.base-box {
  background-color: #fff;
  padding: 0.75rem;
  border-radius: 0.75rem;
}
.block {
  display: block;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5rem;
}
.navList {
  overflow: hidden;
  box-sizing: border-box;
  .lis {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f2f2f2;
    .rwo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .col {
        line-height: 1.375rem;
        flex: 1 1 50%;
        font-size: 0.75rem;
        color: #999999;
        white-space: nowrap;
        min-width: 1px;
      }
    }
    .rwo:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
